<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta charset="utf-8">
	<title>恒铸智能柜管理平台</title>
	<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			<meta name="viewport"
				content="width=device-width, initial-scale=1, maximum-scale=1">
				<meta name="apple-mobile-web-app-status-bar-style" content="black">
					<meta name="apple-mobile-web-app-capable" content="yes">
						<meta name="format-detection" content="telephone=no">
							<link rel="stylesheet"
								href="${pageContext.request.contextPath}/resources/layui/css/layui.css"
								media="all" />
							<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/layui-formSelects-master/dist/formSelects-v4.css" />
							<script type="text/javascript"
								src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
							<script type="text/javascript"
								src="${pageContext.request.contextPath}/resources/js/cacheUserInfo.js"></script>
							<style>
							
.layui-input {
	width: 100%;
}
</style>
</head>
<body style="margin-top: 20px;">
	<div class="layui-form-mid layui-word-aux" style="margin-left: 100px;">
		<g style="color: red!important;padding:5px;">*</g>
		为必填选项
	</div>
	<form class="layui-form">
		<div class="layui-form-item">
			<label class="layui-form-label">ID</label>
			<div class="layui-input-inline">
				
			<%-- <select  xm-select="select1" xm-select-search="" name="caseNo" name="id">
                <c:forEach items="${caseNoList }" var="caseNoList" varStatus="xh">
                	<option value="${caseNoList.caseNo }" >${caseNoList.caseNo }</option>
                </c:forEach>
            </select> --%>
							
				 <input type="text" class="layui-input caseNo" name="caseNo"
					lay-verify="required" placeholder="请输入储物柜ID"> <input
					type="text" class="id" name="id" style="display: none;"> 
			</div>
			<div class="layui-form-mid layui-word-aux">*</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">选择广告</label>
			<div
				class="layui-input-inline fileId layui-form-select layui-form-selected">
				<c:forEach items="${list }" var="list">
					<c:if test="${list.flag == 1 }">
						<input type="text" name="fileId" value="${list.name }"
							id="${list.fileId }" class="layui-input" placeholder="输入或选择广告"
							autocomplete="off">
					</c:if>
				</c:forEach>
				<dl style="display: none;"></dl>
			</div>
			<div class="layui-form-mid layui-word-aux">*</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">描述</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input des" name="des"
					placeholder="请输入描述">
			</div>
		</div>
		<div class="layui-form-item" style="margin-left: 120px;">
			<a class="layui-btn" lay-submit lay-filter="editAd" type="sumbit">立即提交</a>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</form>
</body>
<script type="text/javascript">

	//全局定义一次, 加载formSelects
	layui.config({
	    base: '${pageContext.request.contextPath}'+'/resources/layui/layui-formSelects-master/src/' //此处路径请自行处理, 可以使用绝对路径
	}).extend({
	    formSelects: 'formSelects-v4'
	});

	 //添加操作
	 layui.use(['form','layer','laydate','table','laytpl','formSelects'],function(){
	    var form = layui.form,
	        layer = parent.layer === undefined ? layui.layer : top.layer,
	        $ = layui.jquery,
	        laydate = layui.laydate,
	        laytpl = layui.laytpl,
	        table = layui.table,
	        formSelects = layui.formSelects;
		
	    function AD(name,id){
            this.name=name;
            this.id=id;
        }
	    var list = new Array();
	    var tempName = $(".fileId input").val();
	    var tempId = $(".fileId input").attr("id");
	    
	    <c:forEach items="${list }" var="list">
	    	list.push(new AD("${list.name }","${list.fileId }"))
	    </c:forEach>
	    
    	//隐藏
	   	$(document).click(function(){
			$(".fileId dl").hide();
			$(".fileId input").val(tempName)
	   		$(".fileId input").attr("id",tempId)
		});
	    
	    //显示
		$(".fileId input").click(function(event){
			$(".fileId input").val("");
	    	$(".fileId dl").show();
	    	$(".fileId dl dd").remove();
	    	 for(var i=0;i<list.length;i++){
	 	    	if(list[i].id==tempId){
	 		    	$(".fileId dl").append('<dd class="layui-this" value="'+list[i].id+'">'+list[i].name+'</dd>')
	 	    	}else{
	 		    	$(".fileId dl").append('<dd value="'+list[i].id+'">'+list[i].name+'</dd>')
	 	    	}
	 		}
			event.stopPropagation();
		});
	    
	    //筛选
	    $(".fileId input").on("input propertychange",function(){
	    	$(".fileId dl dd").remove();
	    	$(".fileId dl").hide();
    		if(list.length>0){
    			$(".fileId dl").show();    		
    			var sear = new RegExp($(this).val())
	    		for(var i=0;i<list.length;i++){
	    			if(sear.test(list[i].name)){
	    				if(list[i].id==tempId){
	    	 		    	$(".fileId dl").append('<dd class="layui-this" value="'+list[i].id+'">'+list[i].name+'</dd>')
	    	 	    	}else{
	    	 		    	$(".fileId dl").append('<dd value="'+list[i].id+'">'+list[i].name+'</dd>')
	    	 	    	}
	    			}
	    		}
    		}
	   	})	
	   	
	   	$(".fileId").on("click","dl dd",function(){
	   		tempName=$(this).html()
	   		tempId=$(this).attr("value")
			$(".fileId input").val(tempName)
	   		$(".fileId input").attr("id",tempId)
	   		$(".fileId dl").hide();   
	   	})
		   	
	    form.on('submit(editAd)',function(data){	
	    	data.field.fileId = tempId;
	    	console.log(data.field)
		     $.post("/publish/updateAdvertise",data.field,function(rest){
		    	if(rest.success){
		    		layer.msg("修改成功");
		    		//parent.window.location.reload();
		    		 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					 parent.layer.close(index);
					 parent.layui.table.reload('adListTable')
		    	}else{
		    		layer.msg(rest.message);
		    	}
		   	 }) 
		 }) 
	 })
</script>
</html>